<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>div 标签</div>
    <input type="text">

    <script>
        const div = document.querySelector('div')

        // 1. 点击事件
        // div.addEventListener('click', function () {
        //   console.log('点击事件被触发了')
        //   // 箭头函数this指向外层作用域，不是当前点击对象
        //   this.style.backgroundColor = 'green'
        // })

        // 2. 鼠标移入和离开
        div.addEventListener('mouseenter', function() {
            this.style.backgroundColor = 'green'
        })
        div.addEventListener('mouseleave', function() {
            this.style.backgroundColor = 'pink'
        })


        const text = document.querySelector('input')
            // 3. 键盘按下和弹起
        text.addEventListener('keydown', function(e) {
            console.log(e.key)
        })

        // 4. input监听value值改变
        text.addEventListener('input', function() {
            console.log(this.value)
            const emailRegex = /^ [a - zA - Z0 - 9 _. + -] + @[a - zA - Z0 - 9 - ] + \.[a - zA - Z0 - 9 - .] + $/
            if (emailRegex.test(this.value)) {
                this.style.backgroundColor = 'green'
            } else {
                this.style.backgroundColor = 'red'
            }
        })
    </script>
</body>

</html>